<!DOCTYPE HTML>
<html onselectstart='return false'>

<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<title>阿飞老师-vip课</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #000;
			width: 100%;
			height: 500%;
			overflow: hidden
		}

		#wrap {
			width: 133px;
			height: 200px;
			margin: 25% auto 0;
			position: relative;
			top: -100px;
			transform-style: preserve-3d;
			transform: perspective(1000px) rotateX(-10deg) rotateY(0deg);
		}

		#wrap ul li {
			list-style: none;
			width: 120px;
			height: 180px;
			position: absolute;
			top: 0;
			left: 0;
			border-radius: 3px;
			box-shadow: 0 0 10px #fff;
			background-size: 100%;

			transform: rotateY(0deg) translateZ(0px);
			-webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .5) 100%);
		}

		#wrap p {
			width: 1200px;
			height: 1200px;
			position: absolute;
			border-radius: 100%;
			left: 50%;
			top: 100%;
			margin-left: -600px;
			margin-top: -600px;
			background: -webkit-radial-gradient(center center, 600px 600px, rgba(50, 50, 50, 1), rgba(0, 0, 0, 0));
			transform: rotateX(90deg);
		}
	</style>

</head>

<body>
	<div id="wrap">
		<ul>
			<li style="background-image:url(img/1.jpg);"></li>
			<li style="background-image:url(img/2.jpg);"></li>
			<li style="background-image:url(img/3.jpg);"></li>
			<li style="background-image:url(img/4.jpg);"></li>
			<li style="background-image:url(img/5.jpg);"></li>
			<li style="background-image:url(img/6.jpg);"></li>
			<li style="background-image:url(img/7.jpg);"></li>
			<li style="background-image:url(img/8.jpg);"></li>
			<li style="background-image:url(img/9.jpg);"></li>
			<li style="background-image:url(img/10.jpg);"></li>
			<li style="background-image:url(img/11.jpg);"></li>
		</ul>
		<p></p>
	</div>

	<script src="js/jquery-1.11.3.min.js"></script>
	<script>
		$(function () {
			var oL = $('#wrap ul li').size();
			var Deg = 360 / oL;
			var xDeg = 0, yDeg = -10, xs = 0, ys = 0, p = null;

			for (var i = oL - 1; i >= 0; i--) {

				$('#wrap ul li').eq(i).css({
					transition: "1s " + (oL - i) * 0.15 + "s transform,.5s " + (1 + oL * 0.15) + "s opacity",
					'transform': 'rotateY(' + Deg * i + 'deg) translateZ(350px)'
				});
			}


			$(document).mousedown(function (e) {
				clearInterval(p);
				var x1 = e.clientX;
				var y1 = e.clientY;
				$(this).bind('mousemove', function (e) {
					xs = e.clientX - x1;
					ys = e.clientY - y1;
					x1 = e.clientX;
					y1 = e.clientY;
					xDeg += xs * 0.3;
					yDeg -= ys * 0.1;
					console.log(xs)
					$('#wrap').css('transform', "perspective(800px) rotateX(" + yDeg + "deg) rotateY(" + xDeg + "deg)");
				});
			}).mouseup(function () {
				$(this).unbind('mousemove');
				p = setInterval(function () {
					if (Math.abs(xs) < 0.5 && Math.abs(ys) < 0.5) { clearInterval(p) };
					xs = xs * 0.95;
					ys = ys * 0.95
					xDeg += xs * 0.3;
					yDeg -= ys * 0.1;
					$('#wrap').css('transform', "perspective(800px) rotateX(" + yDeg + "deg) rotateY(" + xDeg + "deg)");
					console.log(xs + ',' + ys);
				}, 30);
			});

		});
	</script>
</body>

</html>